<template>
    <div class="form">
        <div class="formText">
            <el-form :model="form" ref="formRef" label-width="120px" :rules="rules">
                <el-form-item label="属性名称:" prop="name">
                    <el-input v-model="form.name" />
                </el-form-item>

                <el-form-item label="商品类型:">
                    <el-select v-model="value1" placeholder="">
                        <el-option v-for="item in branchClass" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="分类筛选样式:">
                    <el-radio-group v-model="form.filterType">
                        <el-radio :label="0" size="small">普通</el-radio>
                        <el-radio :label="1" size="small">颜色</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="能否进行检查:">
                    <el-radio-group v-model="form.searchType">
                        <el-radio :label="0" size="small">不需要检索</el-radio>
                        <el-radio :label="1" size="small">关键字检索</el-radio>
                        <el-radio :label="2" size="small">范围检索</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="商品属性关联:">
                    <el-radio-group v-model="form.selectType">
                        <el-radio :label="0" size="small">是</el-radio>
                        <el-radio :label="1" size="small">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="属性是否可选:">
                    <el-radio-group v-model="form.handAddStatus">
                        <el-radio :label="0" size="small">唯一</el-radio>
                        <el-radio :label="1" size="small">单选</el-radio>
                        <el-radio :label="2" size="small">复选</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="属性值的录入方式:">
                    <el-radio-group v-model="form.inputType">
                        <el-radio :label="0" size="small">手工录入</el-radio>
                        <el-radio :label="1" size="small">从下面列表中选择</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="属性值可选值列表:">
                    <el-input v-model="form.inputList" autosize type="textarea" />
                </el-form-item>


                <el-form-item label="是否支持手动新增:">
                    <el-radio-group v-model="form.relatedStatus" class="ml-4">
                        <el-radio :label="0" size="small">是</el-radio>
                        <el-radio :label="1" size="small">否</el-radio>
                    </el-radio-group>
                </el-form-item>


                <el-form-item label="排序属性:">
                    <el-input v-model="form.sort" />
                </el-form-item>



                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button @click="Reset" v-if="router.currentRoute.value.query.cid ? true : false">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus';
import { reactive, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { addProductAttributeApi, ProductAttributeApi, updateProductAttributeApi, withAttrListApi } from './api';

type Ioptions = { label: string; value: number, }

const router = useRouter()
// ref表单数据
const formRef = ref()
// form初始值
const form = reactive<IAttributeList>({
    filterType: 0,
    handAddStatus: 0,
    inputList: '',
    inputType: 0,
    name: '',
    productAttributeCategoryId: 0,
    relatedStatus: 1,
    searchType: 0,
    selectType: 1,
    sort: 0,
    type: 0,
})
// 获取url上type赋值
form.type = router.currentRoute.value.query.type;
form.productAttributeCategoryId = router.currentRoute.value.query.cid;
// 选择框选中数据
const value1 = ref()
// 选择框数据
const branchClass = ref<Ioptions[]>([])
// 选择框请求数据
withAttrListApi().then((res) => {
    branchClass.value = res.data.map(item => ({
        label: item.name,
        value: item.id,
    }))
    if (router.currentRoute.value.query.cid) {
        branchClass.value.forEach((item) => {
            console.log(item.value);
            if (item.value == parseInt(router.currentRoute.value.query.cid as string)) {
                value1.value = item
            }

        })
    }

})


const rules = reactive({
    name: [{ required: true, trigger: "blur", message: "请填写属性名称" }],
})

// 清空内容
const initForm = () => {
    form.filterType = 0;
    form.handAddStatus = 0;
    form.inputList = '';
    form.inputType = 0;
    form.name = '';
    form.productAttributeCategoryId = 0;
    form.relatedStatus = 1;
    form.searchType = 0;
    form.selectType = 1;
    form.sort = 0;
    form.type = 0;
    value1.value = "";
}

// 添加商品属性信息
const addProductAttr = () => {
    ElMessageBox.confirm('确定要添加商品属性信息吗', '添加商品属性信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning",
    }).then(() => {
        addProductAttributeApi(form).then((res) => {
            ElMessage.success('添加成功');
            initForm();
            // router.push("/pms/productAttrList?cid=121&cname=看恐案件&type=0")
            router.go(-1);
        }).catch(() => {
            ElMessage.error('添加失败,请重新添加')
            initForm()
        })
    }).catch(() => {
        ElMessage.success('已经取消添加')

    })

}

// 编辑获取商品
if (router.currentRoute.value.query.id) {
    ProductAttributeApi(router.currentRoute.value.query.id).then((res) => {
        console.log(res);
        Object.assign(form, res.data)

    })
}





// 编辑修改商品属性信息
const editProductAttr = () => {
    ElMessageBox.confirm('确定要修改商品属性信息吗', '修改商品属性信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning",
    }).then(() => {
        updateProductAttributeApi(router.currentRoute.value.query.id, form).then((res) => {
            ElMessage.success('修改成功');
            initForm();
            // router.push("/pms/productAttrList?cid=121&cname=看恐案件&type=0")
            router.go(-1);
        }).catch(() => {
            ElMessage.error('修改失败,请重新修改')
            initForm()
        })
    }).catch(() => {
        ElMessage.success('已经取消修改')

    })
}

// 点击确定
const onSubmit = () => {
    console.log(value1.value);
    console.log(router.currentRoute.value.query.cid);

    formRef.value?.validate((bool: boolean) => {
        if (bool) {
            if (!router.currentRoute.value.query.id) {
                addProductAttr()

            } else {
                editProductAttr()
                // console.log(router.currentRoute.value.query.id);

            }


        } else {
            ElMessage.error('请输入完整信息')
        }
    })

}
// 点击取消
const Reset = () => {

}


</script>

<style lang="less" scoped>
.form {
    // background-color: #cFc;
    box-sizing: border-box;
    padding: 35px 35px 15px 35px;
    // margin: 25px;
    width: 790px;
    margin: 30px auto 0px;
    border: 1px solid rgb(231, 231, 231);

    .formText {
        padding: 20px;

        :deep(.el-form-item) {
            width: 100%;
            // height: 40px;
            margin-bottom: 22px;

            .asterisk-left {
                // height: 72px !important;
                margin-bottom: 54px;
            }

            .upload-demo {
                width: 100%
            }

            .el-form-item__content {
                // height: 40px;


                .el-input {
                    height: 40px;
                }
            }

            .el-form-item__label {
                width: 150px !important;
                line-height: 40px;
            }
        }

        .deldiv {
            margin-bottom: 22px;

            .del {
                margin-left: 20px;

            }
        }


        .add {
            width: 100%;
            margin-bottom: 22px;
        }

        .img {
            width: 100%;
        }
    }
}
</style>